<style lang="scss" scoped="">
  .header{
    height: 50px;

    width: 100%;
    // background-color: white;e
    background-color: #4EA0FE;
    display: flex;
    align-items:center;
    border-bottom: 1px solid #DCDAE2;
    .menu_btn{
      width: 40px;
      height: 100%;
      justify-content: center;
      display: flex;
      align-items:center;
      position: relative;
    }
    .menu_btn:hover{
      background-color: #69f0ae;
    }
  }
  .side_bar{
    position: absolute;
    width: 200px;
    height: calc(100vh - 55px);
    z-index: 1999;
    top:55px;
    left: -200px;
    background-color: #265329;
    color:white;
    transition: left 0.3s;
    &.act{
      left: 0px;
    }
    
  }
  .entry{
      color:#FFFFFF;
      height: 40px;
      line-height: 40px;
      // padding: 0px 15px 15px 15px;
      padding: 0px 20px 0px 20px;
      font-size: 16px;
      text-align: center;
    }
  .entry:hover{
    cursor: pointer;
    // background-color: #69f0ae;
    color: white;
    
    // border-bottom: 2px solid rgb(210,210,210);
  }
  .logo{
    width: 160px;
    text-align: center;
    padding: 0px 20px 0px 20px;
    line-height: 10px;
  }
  .demo-badge{
    width: 42px;
    height: 42px;
    background: #eee;
    border-radius: 6px;
    display: inline-block;
  }
  .masge{
    padding: 8px;
    width: 40px;
    height: 40px;
    text-align: center;
    float:right;
    margin-right: 20px;
    
  }
  .masge:hover{
    cursor:pointer
  }
  .login-body-content{
    padding: 6px 0 0;
    height: 100%;
    padding: 4px 0;
    overflow: auto;
}
.login-content-item {
    margin: 0;
    line-height: normal;
    padding: 7px 16px;
    clear: both;
    list-style: none;
    font-size: 13px;
    
}
.login-body-content:hover {
    background-color: #97c0ef;
    cursor: pointer;
  }
</style>
<template>
  <div class="header">
    <div class="menu_btn" @mouseover="showmenu(true)" @mouseout="showmenu(false)">
    </div>
   <div class="left_header">
       <slot name="right"></slot>
   </div>

  </div>



</template>

<script>
  var menu_show_delay_g=false;
  export default {
    name: 'mheader',
    components: {

    },
    props:{

    },
    data() {
      return {
        menu_show:false
      }
    },
    mounted() {



    },
    methods: {
      showmenu(b){
        var that=this;
        if(b){
          menu_show_delay_g=b
          this.menu_show=true;
        }else{
          menu_show_delay_g=false;
          setTimeout(function(){
            that.menu_show=menu_show_delay_g
          },100)
        }


      }
    }
  }
</script>
